<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改商品</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="/houtai/js/vue.js"></script>
    <script type="text/javascript" src="/houtai/js/jquery-2.1.4.js"></script>

    <link rel="stylesheet" href="/houtai/layuiadmin/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>
<div id="content">
    <form class="layui-form layui-form-pane" id="updateForm">
        <div class="layui-form-item layui-form-text" style="margin:20px auto;width: 70%">
            <label class="layui-form-label">关于我们</label>
            <div class="layui-input-block">
                <textarea style="height: 200px" name="aboutUs" id="aboutUs" lay-verify="notNull" :value="product.productDesc" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-upload" style="margin: 20px auto;width: 70%">
            <button type="button" class="layui-btn" id="test1">轮播图</button><br>
            <span style="color: red">推荐尺寸：宽300px 高300px</span><br>
            <span style="color: red">注意事项：</span><br>
            <span style="color: red">图片选择完毕后必须点击下方"确认展示图"按钮，不然无法更新</span><br>
            <input type="button" class="layui-btn layui-btn-warm" id="uploadHead" lay-submit value="确认轮播图">
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图：
                <div class="layui-upload-list" id="demo1"></div>
                <div id="head_img_prev"></div>
            </blockquote>
        </div>

        <div class="layui-upload" style="margin: 40px auto;width: 70%">
            <button type="button" class="layui-btn" id="test2">菜品展示图</button><br>
            <span style="color: red">推荐尺寸：300(像素) x 300(像素)</span><br>
            <span style="color: red">菜品图注意事项：</span><br>
            <span style="color: red">1、点击"菜品展示图"按钮选择需要上传的轮播图，一次可以选择一张或多张</span><br>
            <span style="color: red">2、如果某张图片选择错误，预览区域点击错误图片即可删除</span><br>
            <span style="color: red">3、此次上传会覆盖掉之前的所有图片，如果此次更新需要保留之前的轮播图，此次请把之前的图片一并上传</span><br>
            <span style="color: red">4、图片选择完毕后点击下方"确认展示图"按钮，不然展示图无法更新</span><br>
            <input type="button" class="layui-btn layui-btn-warm" id="uploadMeal" lay-submit value="确认展示图">
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图：
                <div class="layui-upload-list" id="demo2"></div>
                <div id="meal_img_prev"></div>
            </blockquote>
        </div>
        <div class="layui-upload" style="margin: 40px auto;width: 70%">
            <button type="button" class="layui-btn" id="test3">加盟详情图</button><br>
            <span style="color: red">推荐尺寸：300(像素) x 300(像素)</span><br>
            <span style="color: red">加盟详情图注意事项：</span><br>
            <span style="color: red">1、点击"商品详情图"按钮选择需要上传的详情图，一次可以选择一张或多张</span><br>
            <span style="color: red">2、如果某张图片选择错误，预览区域点击错误图片即可删除</span><br>
            <span style="color: red">3、此次上传会覆盖掉之前的所有图片，如果此次更新需要保留之前的详情图，此次请把之前的详情图一并上传</span><br>
            <span style="color: red">4、图片选择完毕后点击下方"确认详情图"按钮，不然详情图无法更新</span><br>
            <input type="button" class="layui-btn layui-btn-warm" id="uploadCase" lay-submit value="确认详情图">
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图：
                <div class="layui-upload-list" id="demo3"></div>
                <div id="case_img_prev"></div>
            </blockquote>
        </div>

        <div class="layui-form-item" style="margin: 20px auto;width: 70%">
            <div class="layui-input-block" style="margin-left: 350px" id="submitDiv">
                <input type="button" class="layui-btn" lay-submit lay-filter="updateSubmit" value="立即提交">
            </div>
        </div>
    </form>

</div>



<script src="/houtai/layuiadmin/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    //多图容器 【注册全局变量】
    var multiple_images = [];
    //存放加盟商图片对象
    var joinImgCases = [];
    //用于存放商品轮播图对象
    var joinImgHead = [];
    //用于存放商品详情图对象
    var joinImgMeal = [];
    //商品ID用于给商品对象赋值
    var productId;
    //判断更改后是否点击确定
    var checkHeadIsSure = false;
    var checkMealIsSure = false;
    var checkCaseIsSure = false;
    //判断是否更改了商品展示图
    var isChangeHeadImg = false;
    var isChangeMealImg = false;
    var isChangeCaseImg = false;
    //判断是否是第一次上传，第一次上传就清空数组
    var isFirstHead = 1;
    var isFirstMeal = 1;
    var isFirstCase = 1;

    //利用Vue钩子函数给表单赋初始值
    var vue = new Vue({
        el:"#content",
        data:{
            product:{},
            allBusiness:[],
            allProTypes:[]
        },
        //给表单赋初始值
        created:function () {
            var _this = this;
            $.ajax({
                url:"/houtai/page/deploy/join/getJoinImgHeads",
                type:"post",
                dataType:"json",
                success:function (data) {
                    var _this = this;
                    var html="";
                    console.log(data);
                    if(data.message == "success"){
                        joinImgHead = data.li;
                        for(var i = 0;i < data.li.length;i++){
                            html+='<img style="width: 200px;height: 100px;margin-right: 5px" src="'+ data.li[i].businessHeadImgUrl +'">';
                        }
                        $("#head_img_prev").append(html);
                    }else{
                        location.href = "/houtai/page/exception/500.html";
                    }
                }
            });
            $.ajax({
                url:"/houtai/page/deploy/join/getJoinImgMeals",
                type:"post",
                dataType:"json",
                success:function (data) {
                    var _this = this;
                    console.log(data);
                    if(data.message == "success"){
                        joinImgMeal = data.li;
                        var html = "";
                        for(var i = 0;i < data.li.length;i++){
                            html+='<img style="width: 100px;height: 100px;margin-right: 5px" src="'+ data.li[i].joinImgMealUrl +'"  class="img-thumbnail" />';
                        }
                        $("#meal_img_prev").append(html);
                    }else{
                        location.href = "/houtai/page/exception/500.html";
                    }
                }
            });
            $.ajax({
                url:"/houtai/page/deploy/join/getJoinImgCases",
                type:"post",
                dataType:"json",
                success:function (data) {
                    var _this = this;
                    console.log(data);
                    if(data.message == "success"){
                        joinImgCases = data.li;
                        var html = "";
                        for(var i = 0;i < data.li.length;i++){
                            html+='<img style="height: 100px;height: 100px;margin-right: 5px" src="'+ data.li[i].joinImgCaseUrl +'"  class="img-thumbnail" />';
                        }
                        $("#case_img_prev").append(html);
                    }else{
                        location.href = "/houtai/page/exception/500.html";
                    }
                }
            });
            $.ajax({
                url:"/houtai/page/deploy/join/getAboutus",
                type:"post",
                dataType:"json",
                success:function (data) {
                    var _this = this;
                    console.log(data);
                    if(data.message == "success"){
                        $("#aboutUs").text(data.obj.aboutusDesc)
                    }else{
                        location.href = "/houtai/page/exception/500.html";
                    }
                }
            });
        }
    });

    //layui相关操作
    layui.use(['upload','jquery','laypage','laydate','form'], function() {
        var upload = layui.upload;
        var $ = layui.jquery;
        var laydate = layui.laydate;
        var form = layui.form;
        //刷新表单
        form.render();

        //验证表单内容
        form.verify({
            notNull:function (value, item) {
                if(value == null || value.trim() == ''){
                    return "内容不能为空";
                }
            },
            price:[
                /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,
                '请填写正确的价格'
            ],
            num:[
                /(^[1-9]\d*$)/,
                '库存只能是正整数'
            ]
        });

        //轮播图上传
        upload.render({
            elem: '#test1'
            ,url: '/houtai/page/products/product/uploadHeadImg' //改成您自己的上传接口
            ,multiple: true
            ,number:0
            ,auto: false
            ,bindAction: '#uploadHead'
            ,choose: function(obj){
                isChangeHeadImg = true;
                $("#head_img_prev").attr("hidden",true);
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').append('<img style="width: 200px;height: 100px;margin-right: 5px" src="'+ result +'" alt="'+ file.name
                        +'" title="点击删除" class="layui-upload-img" onclick="delMultipleImgs(this)">')
                });
            }
            ,done: function(res){
                if(res.code == 200){
                    checkHeadIsSure = true;
                    layer.msg("轮播图上传成功")
                    console.log("res.message");
                    console.log(res.message);
                    var businessHeadImgUrl = res.message.split("||")[0];
                    console.log(businessHeadImgUrl);
                    if(isFirstHead == 1){
                        joinImgHead = [];
                        var imgHead = {businessHeadImgUrl:businessHeadImgUrl};
                        joinImgHead.push(imgHead);
                        console.log(imgHead);
                        isFirstHead++;
                        //追加图片成功追加文件名至图片容器
                        multiple_images.push(res.message.split("||")[0]);
                    }else{
                        var imgHead = {businessHeadImgUrl:businessHeadImgUrl};
                        joinImgHead.push(imgHead);
                        console.log(imgHead);
                        //追加图片成功追加文件名至图片容器
                        layer.msg("轮播图上传成功");
                        multiple_images.push(businessHeadImgUrl);
                    }
                }
            }
        });
        //判断是否未选择图片误点了确认按钮
        $("#uploadHead").click(function () {
            if(!isChangeHeadImg){
                layer.msg("还没有选择图片哦");
            }
        })

        // 菜品图多图片上传
        upload.render({
            elem: '#test2'
            ,url: '/houtai/page/products/product/uploadHeadImg' //改成您自己的上传接口
            ,multiple: true
            ,number:0
            ,auto: false
            ,bindAction: '#uploadMeal'
            ,choose: function(obj){
                isChangeMealImg = true;
                $("#meal_img_prev").attr("hidden",true);
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img style="width: 150px;height: 150px;margin-right: 5px" src="'+ result +'" alt="'+ file.name
                        +'" title="点击删除" class="layui-upload-img" onclick="delMultipleImgs(this)">')
                });
            }
            ,done: function(res){
                if(res.code == 200){
                    checkMealIsSure = true;
                    layer.msg("菜品图上传成功")
                    console.log("res.message");
                    console.log(res.message);
                    var joinImgMealUrl = res.message.split("||")[0];
                    console.log(joinImgMealUrl);
                    if(isFirstMeal == 1){
                        joinImgMeal = [];
                        var imgMeal = {joinImgMealUrl:joinImgMealUrl};
                        joinImgMeal.push(imgMeal);
                        console.log(imgMeal);
                        isFirstMeal++;
                        //追加图片成功追加文件名至图片容器
                        multiple_images.push(res.message.split("||")[0]);
                    }else{
                        var imgMeal = {joinImgMealUrl:joinImgMealUrl};
                        joinImgMeal.push(imgMeal);
                        console.log(imgMeal);
                        //追加图片成功追加文件名至图片容器
                        layer.msg("菜品图上传成功");
                        multiple_images.push(joinImgMealUrl);
                    }
                }
            }
        });
        //判断是否未选择图片误点了确认按钮
        $("#uploadMeal").click(function () {
            if(!isChangeMealImg){
                layer.msg("还没有选择图片哦");
            }
        })

        // 加盟图多图片上传
        upload.render({
            elem: '#test3'
            ,url: '/houtai/page/products/product/uploadHeadImg' //改成您自己的上传接口
            ,multiple: true
            ,number:0
            ,auto: false
            ,bindAction: '#uploadCase'
            ,choose: function(obj){
                isChangeCaseImg = true;
                $("#case_img_prev").attr("hidden",true);
                //预读本地文件示例，不支持ie8，同时增加点击图片删除
                obj.preview(function(index, file, result){
                    $('#demo3').append('<img style="width: 150px;height: 150px;margin-right: 5px" src="'+ result +'" alt="'+ file.name
                        +'" title="点击删除" class="layui-upload-img" onclick="delMultipleImgs(this)">')
                });
            }
            //单个图片上传完成之后的方法
            ,done: function(res){
                //判断是否上传成功
                if(res.code == 200){
                    checkCaseIsSure = true;
                    layer.msg("商品详情图上传成功")
                    console.log("res.message");
                    console.log(res.message);
                    var joinImgCaseUrl = res.message.split("||")[0];
                    console.log(joinImgCaseUrl);
                    //判断是否是上传第一张图片，如果是第一章图片就把原轮播图数组清空，否则就添加数据进数组
                    if(isFirstCase == 1){
                        joinImgCases = [];
                        var imgCase = {joinImgCaseUrl:joinImgCaseUrl};
                        joinImgCases.push(imgCase);
                        console.log(imgCase);
                        isFirstCase++;
                        layer.msg("加盟图上传成功");
                        //追加图片成功追加文件名至图片容器
                        multiple_images.push(joinImgCaseUrl);
                    }else{
                        var imgCase = {joinImgCaseUrl:joinImgCaseUrl};
                        joinImgCases.push(imgCase);
                        console.log(imgCase);
                        //追加图片成功追加文件名至图片容器
                        layer.msg("加盟图上传成功");
                        multiple_images.push(joinImgCaseUrl);
                    }
                }
            }
        });
        //判断是否未选择图片误点了确认按钮
        $("#uploadCase").click(function () {
            if(!isChangeCaseImg){
                layer.msg("还没有选择图片哦");
            }
        })



        //监听表单提交，上述的submit()中的值为事件过滤器的值
        form.on('submit(updateSubmit)', function(data){
            console.log("提交表单了");
            //校验表单字段是否符合规则
            function checkNotNull(){
                var aboutUs = $("#aboutUs").val();
                console.log(aboutUs);
                if(aboutUs != null && aboutUs.trim() != ''){
                    return true;
                }else {
                    return false;
                }
            }
            if(checkNotNull()){
                var aboutus = $("#aboutUs").val();
                console.log(typeof (aboutus))
                let imgHead = JSON.stringify(joinImgHead);
                let imgMeal = JSON.stringify(joinImgMeal);
                let imgCase = JSON.stringify(joinImgCases);
                if(isChangeHeadImg && !checkHeadIsSure){
                    layer.msg("请先确认商品展示图再提交");
                }else if(isChangeMealImg && !checkMealIsSure){
                    layer.msg("请先确认商品轮播图再提交");
                }else if(isChangeCaseImg && !checkCaseIsSure){
                    layer.msg("请先确认商品详情图再提交");
                }else{
                    if(checkHeadIsSure){
                        $.ajax({
                            url:"/houtai/page/deploy/join/updateHead",
                            data:imgHead,
                            type:"post",
                            contentType:"application/json",
                            traditional: true,
                            dataType:"json",
                            success:function (data) {
                                if(data.message == "success"){
                                    layer.msg("修改成功");
                                }else if(data.message == "serverException"){
                                    location.href = "/houtai/page/exception/500.html";
                                }else{
                                    layer.msg("修改失败", {icon: 5});
                                }
                            }
                        });
                    };
                    if(checkMealIsSure){
                        $.ajax({
                            url:"/houtai/page/deploy/join/updateMeal",
                            data:imgMeal,
                            type:"post",
                            contentType:"application/json",
                            traditional: true,
                            dataType:"json",
                            success:function (data) {
                                if(data.message == "success"){
                                    layer.msg("修改成功");
                                }else if(data.message == "serverException"){
                                    location.href = "/houtai/page/exception/500.html";
                                }else{
                                    layer.msg("修改失败", {icon: 5});
                                }
                            }
                        });
                    };
                    if(checkCaseIsSure){
                        $.ajax({
                            url:"/houtai/page/deploy/join/updateCase",
                            data:imgCase,
                            type:"post",
                            contentType:"application/json",
                            traditional: true,
                            dataType:"json",
                            success:function (data) {
                                if(data.message == "success"){
                                    layer.msg("修改成功");
                                }else if(data.message == "serverException"){
                                    location.href = "/houtai/page/exception/500.html";
                                }else{
                                    layer.msg("修改失败", {icon: 5});
                                }
                            }
                        });
                    }
                    $.ajax({
                        url:"/houtai/page/deploy/join/updateAboutus",
                        data:{aboutus:aboutus},
                        type:"post",
                        dataType:"json",
                        success:function (data) {
                            if(data.message == "success"){
                                layer.msg("修改成功");
                            }else if(data.message == "serverException"){
                                location.href = "/houtai/page/exception/500.html";
                            }else{
                                layer.msg("修改失败", {icon: 5});
                            }
                        }
                    })

                }
            }
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });

    //单击图片删除图片 【注册全局函数】
    function delMultipleImgs(this_img){
        //获取下标
        var subscript=$("#demo2 img").index(this_img);
        //删除图片
        this_img.remove();
        //删除数组
        multiple_images.splice(subscript, 1);
        //重新排序
        multiple_images.sort();
        $('.multiple_show_img').val(multiple_images);
        //console.log("multiple_images",multiple_images);
        //返回
        return ;
    }


</script>
<!--<script>-->
<!--    var students = [];-->
<!--    var teachers = [];-->
<!--    var stu1 = {name:zhangsan,age:12};-->
<!--    var stu2 = {name:lisi,age:13}-->
<!--    var tea1 = {name:aa,age:15}-->
<!--    var tea2 = {name:bb,age:18}-->
<!--    students.push(stu1);-->
<!--    students.push(stu2);-->
<!--    teachers.push(tea1);-->
<!--    teachers.push(tea2);-->
<!--</script>-->
</body>
</html>